<template>

	<b-layout-index :style="{ '--colorPrimary': color.primary}">
		<theme-color-bg type="c3">
			<navbar isStyle="light" :fixed="true"></navbar>
			<view class="pd-top-10 oval header  mg-bottom-10">
				<view class="mg-left-10 mg-right-10">
				 	<u-search class="ltr" inputAlign="center" :placeholder="$t('请输入手机号')" @search="getSerach" :center="true" :showAction="false"
						shape="round">
					</u-search> 
				 
					<view class="mg-top-10 color-white" v-if="authInfo.id>0">
						<u-cell :border="false" icon="setting-fill">
							<u-avatar :size="60" slot="icon" :src="authInfo.avatar"></u-avatar>
							<view class="pd-left-5 pd-right-5 color-white font-size-16" slot="title">
								{{isUg?(authInfo.nameUg?authInfo.nameUg:authInfo.name):(authInfo.name?authInfo.name:authInfo.name)}}
							</view>
							<view class="pd-left-5 pd-right-5 color-white font-size-12" slot="label">
								<text>
									{{$t("代理类型")}}
								</text>
								:<text>{{authInfo.agentName}}</text>
							</view>
						</u-cell>
					</view>
			

					<view class="mg-top-10 color-white">
						<u-cell :border="false" icon="setting-fill">
							<u-avatar :size="60" slot="icon" :src="userInfo.avatar"></u-avatar>
							<view class="pd-left-5 pd-right-5 color-white font-size-16" slot="title">
								{{userInfo.name?userInfo.name:userInfo.nickname}}
							</view>
							<view class="pd-left-5 pd-right-5 color-white font-size-12" slot="label">
								<text>
									{{$t("代理类型")}}
								</text>
								:<text>{{isUg?userInfo.agent.nameUg:userInfo.agent.name}}</text>
							</view>
						</u-cell>
					</view>

				</view>


			</view>
		</theme-color-bg>
		<view class="coverfill br-rd-top-30 ">
			<view class="pd-30">
				<view class="title   font-size-24  font-bold">{{$t('注册中心')}} </view>
				<view>
					<u--form :borderBottom="false" :model="param" :rules="rules" ref="form1">
						<u-form-item prop="name">
							<view class="mg-top-10">
								<view class="input br-rd-6">
									<u-cell :border="false">
										<iconfont slot="icon" color="#3c9cff" icon="icon-wode" />
										<u--input slot="title" class="pd-left-10 pd-right-10 ltr"
											:placeholder="$t('请输入你的中文名字')" v-model="param.name" border="none">
										</u--input>
									</u-cell>
								</view>
							</view>
						</u-form-item>


						<u-form-item prop="phone">
							<view>
								<view class="input br-rd-6">
									<u-cell :border="false">
										<iconfont slot="icon" color="#3c9cff" icon="icon-shouji" />

										<u--input slot="title" class="pd-left-10 pd-right-10 ltr"
											:placeholder="$t('请输入手机号')" v-model="param.phone" border="none"></u--input>
									</u-cell>
								</view>
							</view>
						</u-form-item>

						<u-form-item prop="password">
							<view>
								<view class="input br-rd-6">
									<u-cell :border="false">
										<iconfont slot="icon" color="#3c9cff" icon="icon-mima1" />

										<u--input type="password" slot="title" class="pd-left-10 pd-right-10 ltr"
											:placeholder="$t('请输入新密码')" v-model="param.password"
											border="none"></u--input>
									</u-cell>
								</view>
							</view>
						</u-form-item>




						<view class="mg-top-20">

							<u-button @click="goEdit()" customStyle="border-radius:6px" type="primary" :plain="true"
								:text="$t('确认注册')">
							</u-button>

						</view>

					</u--form>


				</view>
			</view>
			<!-- 		<u-empty v-if="authInfo.id==0" mode="search">
			</u-empty> -->

		</view>
	</b-layout-index>

</template>

<script>
	import {
		login,
		loginAccount,
		byPhone,
		byIdCard,
		regesterLogin
	} from '@/api/oauth.js'
	import {
		regesterMini,
		serachByPhone
	} from '@/api/user.js'

	export default {

		data() {
			var userInfo = uni.getStorageSync("userInfo")
			console.log(userInfo)
			return {
				userInfo: userInfo,
				authInfo: {
					id: 0
				},
				param: {
					idcard: "",
					name: "",
					nameUg: "",
					password: "",
					phone: "",
					repassword: "",
					wechat: ""

				},
				rules: {
					'name': [{
						type: 'string',
						required: true,
						message: this.$t('请输入你的中文名字'),
						trigger: ['blur', 'change']
					}, {
						pattern: /^[\u4e00-\u9fa5·]*$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: this.$t('你的中文名字不对'),
						trigger: ['blur', 'change']
					}],


					// 字段名称
					"phone": [{
							required: true,
							message: this.$t('请输入手机号'),
							trigger: ['blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: this.$t('手机号码不正确'),
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						},
						// 校验用户是否已存在
						{
							required: true,
							asyncValidator: (rule, value, callback) => {
								console.log("手机号", value)
								if (value != "") {
									byPhone(value).then(res => {
										console.log(res)
										callback();
									}).catch(e => {
										console.log("Error", e)
										callback(new Error(this.$t('手机号已存在')));

									})
								} else {
									callback();
								}
							},
							// 如果是异步校验，无需写message属性，错误的信息通过Error抛出即可
							message: this.$t('手机号已存在'),
							trigger: ['blur']
						}
					],
					// 字段名称
					"idcard": [{
							required: true,
							message: this.$t('请输入身份证号'),
							trigger: ['blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.idCard(value);
							},
							message: this.$t('身份证号不正确'),
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						},
						// 校验用户是否已存在
						{
							required: true,
							asyncValidator: (rule, value, callback) => {
								console.log("身份证号", value)
								if (value != "") {
									byIdCard(value).then(res => {
										console.log(res)
										callback();
									}).catch(e => {
										console.log("Error", e)
										callback(new Error(this.$t('身份证号已存在')));

									})
								} else {
									callback();
								}
							},
							// 如果是异步校验，无需写message属性，错误的信息通过Error抛出即可
							message: this.$t('身份证号已存在'),
							trigger: ['blur']
						}
					], // 字段名称
					"wechat": [{
						required: true,
						message: this.$t('请输入微信号'),
						trigger: ['blur']
					}],

					password: [{
							required: true,
							message: this.$t('请输入密码'),
							trigger: 'blur'
						},
						{
							min: 6,
							max: 20,
							message: this.$t('长度在{0}到{1}个字符', [6, 20]),
							trigger: 'blur'
						},
						{
							validator: validatePass,
							trigger: 'blur'
						}
					],
					repassword: [{
							required: true,
							message: this.$t('请确认密码'),
							trigger: 'blur'
						},
						{
							min: 6,
							max: 20,
							message: this.$t('长度在{0}到{1}个字符', [6, 20]),
							trigger: 'blur'
						},
						{
							validator: validatePass2,
							trigger: 'blur',
							required: true
						}
					]

				}
			}
		},
		onLoad: function({
			type = 12,
			userId = 0
		}) {


			this.getSerach(this.userInfo.phone)

		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			getSerach: function(e) {
				uni.showLoading()
				console.log(e)
				var the = this;
				serachByPhone(e).then(res => {
					console.log(res)
					the.authInfo = res;
					uni.hideLoading()
				})

			},
			getAuthInfo: function(userId = 0) {
				var the = this;
				getAuthByInfo(userId).then(res => {
					the.authInfo = res;
					the.param = res;
				})
			},
			goEdit: function(e) {
				var the = this
				var param = this.param;
				var param = this.param;
				param['parentUserId'] = this.authInfo.id
				console.log("Login")
				//	this.$refs.form1.setRules(this.rules);
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				//prevPage.$vm.detailList.receive = item; //修改上一页data里面的地址
				console.log("pages", nowPage, prevPage)
				this.$refs.form1.validate().then(res => {
					//	uni.$u.toast('校验通过')
					var a = regesterMini(param)
					a.then(res => {
						uni.setStorageSync("newUser", res)

						uni.redirectTo({
							url: "/page/workbench/pages/agent/upgrade?isReg=true&upgrade=2"
						})
					})
				}).catch(errors => {
					console.log(errors)
					uni.$u.toast(the.$t('校验失败'))
				})

			},
			loginSubmitAccond: function() {
				var the = this;
				var param = this.param;
				param['parentUserId'] = this.authInfo.id
				this.$refs.form1.validate().then(res => {
					uni.$u.toast(the.$t('校验通过'))
					console.log(param)

				}).catch(errors => {
					console.log(errors)
					uni.$u.toast(the.$t('校验失败'))
				})
			}
		}
	}

	var validatePass = (rule, value, callback) => {
		if (value === '') {
			callback(new Error(this.$t('请输入密码')));
		} else {
			callback();
		}
	};
	var validatePass2 = (rule, value, callback) => {
		if (value === '') {
			callback(new Error(this.$t('请再次输入密码')));
		} else if (value !== this.model2.password) {
			callback(new Error(this.$t('两次输入密码不一致')));
		} else {
			callback();
		}
	};
</script>

<style>
	.header {
		background-color: var(--color-primary);
		height: 300px;
		color: #FFFFFF;
	}

	.tag {
		background-color: #FFFFFF !important;
		height: 100%;
	}

	page {
		background-color: #FFFFFF !important;
	}

	.coverfill {
		background-color: #FFFFFF;
		margin-top: -40px;
		min-height: 250px;
		z-index: 300;
		position: absolute;
		width: 100%;
		top: 270px;
		left: 0;
		height: 67%;
	}

	.br-rd-top-30 {
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
	}

	.title {
		color: #3c9cff;
	}

	.input {
		background-color: #3c9cff0f;
	}
</style>